<template>
    <div class="common-layout">
        <el-container>
            <el-aside width="200px">
                <el-card style=" height: 720px;">
                    <el-input v-model="filterText" class="w-60 mb-2" placeholder="Filter keyword" />
                    <el-tree ref="treeRef" style="max-width: 600px;height: 610px;" class="filter-tree"
                        :data="Insttreedata" :props="defaultProps" default-expand-all
                        :filter-node-method="filterNode" />
                </el-card>
            </el-aside>
            <el-container>
                <el-header>
                    <el-card>
                        <el-form :inline="true" :model="formset" class="demo-form-inline">
                            <el-form-item label="团队名称">
                                <el-input v-model="formset.TeamName" clearable style="width: 150px;" />
                            </el-form-item>
                            <el-form-item label="状态">
                                <el-select v-model="formset.TeamStatus" placeholder="请选择" clearable
                                    style="width: 150px;">
                                    <el-option label="启用" value="true" />
                                    <el-option label="停用" value="false" />
                                </el-select>
                            </el-form-item>

                            <el-button type="primary" @click="teamlist">查询</el-button>
                            <el-button @click="resset">重置</el-button>
                        </el-form>
                    </el-card>
                </el-header>
                <el-main style="margin-top: 30px;">
                    <el-card>
                        <el-button type="primary" @click="teamset(null)">新增</el-button>
                        <el-button type="success">启用</el-button>
                        <el-button type="info">停用</el-button>
                        <el-button type="danger">删除</el-button>
                        <el-table :data="teamdata" stripe style="width: 100%;height: 500px;">
                            <el-table-column prop="teamName" label="团队名称" />
                            <el-table-column prop="parentTeam" label="上级团队" />
                            <el-table-column prop="charge" label="负责人" />
                            <el-table-column label="团队标签">
                                <template #default="scope">
                                    <div class="tag-container">
                                        <!-- 将 teamTags 字符串按逗号分割并遍历 -->
                                        <span
                                            v-for="tag in (scope.row.teamTags || '').split(/[，,]/).map(t => t.trim()).filter(Boolean)"
                                            :key="tag" class="tag-item">
                                            {{ tag.charAt(0) }}
                                        </span>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="teamStatus" label="状态">
                                <template #default="scope">
                                    <el-tag v-if="scope.row.teamStatus == 1" type="success">启用</el-tag>
                                    <el-tag v-else type="danger">停用</el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" width="300">
                                <template #default="scope">
                                    <el-button type="primary" size="mini" @click="teamset(scope.row)">编辑</el-button>
                                    <el-button>
                                        <span @click="Teamstate(scope.row.teamId)"
                                            v-if="scope.row.teamStatus == false">启用</span>
                                        <span @click="Teamstate(scope.row.teamId)"
                                            v-else="scope.row.teamStatus == true">停用</span>
                                    </el-button>
                                    <el-button type="danger" size="mini" @click="open(scope.row.teamId)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <el-pagination v-model:current-page="page.Pagindex" v-model:page-size="page.Pagsize"
                            :page-sizes="[3, 5, 8, 10]" :background="true"
                            layout="total, sizes, prev, pager, next, jumper" :total="page.totalcount" />
                    </el-card>
                </el-main>
            </el-container>
        </el-container>
    </div>
    <el-dialog v-model="teamSettinig.isOpen" :title="teamSettinig.title" width="500" draggable align-center>
        <el-form>
            <b>团队信息</b>
            <el-form-item label="团队名称">
                <el-input v-model="Teamadddata.teamName" />
            </el-form-item>
            <el-form-item label="上级团队">
                <el-select v-model="Teamadddata.parentTeam" placeholder="请选择">
                    <el-option label="医学团队" value="医学团队" />
                    <el-option label="国际团队" value="国际团队" />
                    <el-option label="中国团队" value="中国团队" />
                    <el-option label="美国团队" value="美国团队" />
                </el-select>
            </el-form-item>
            <el-form-item label="团队标签">
                <el-checkbox-group v-model="Teamadddata.teamTags">
                    <el-checkbox label="高血压" />
                    <el-checkbox label="糖尿病" />
                    <el-checkbox label="高血脂" />
                    <el-checkbox label="肥胖症" />
                    <el-checkbox label="高尿酸" />
                </el-checkbox-group>
            </el-form-item>
            <el-form-item label="联系电话">
                <el-input v-model="Teamadddata.phone" />
            </el-form-item>
            <el-form-item label="团队简介">
                <el-input type="textarea" v-model="Teamadddata.teamProfile" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="teamSettinig.isOpen = false">取消</el-button>
                <el-button type="primary" @click="teamtage">
                    保存
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref, watch } from 'vue'
import { ElMessage, ElMessageBox, type FilterNodeMethodFunction, type TreeInstance } from 'element-plus'
import axios from 'axios'
import { useCounterStore } from '@/stores/counter'

const store = useCounterStore()




interface Tree {
    [key: string]: any
}

const filterText = ref('')
const treeRef = ref<TreeInstance>()

const defaultProps = {
    children: 'children',
    label: 'label',
}

watch(filterText, (val) => {
    treeRef.value!.filter(val)
})

const filterNode: FilterNodeMethodFunction = (value: string, data: Tree) => {
    if (!value) return true
    return data.label.includes(value)
}
const Insttreedata = ref([])
//树形方法
const Insttreelist = () => {
    axios.get("http://localhost:5108/api/Manager/InstitutionTree").then(res => {
        Insttreedata.value = res.data.data
        console.log(Insttreedata.value)

    })
}

//团队列表

//查询参数
const formset = reactive({
    TeamName: "",
    TeamStatus: ""
})
//重置
const resset = () => {
    formset.TeamName = ""
    formset.TeamStatus = ""
    teamlist()
}
//分页参数
const page = reactive({
    Pagindex: 1,
    Pagsize: 3,
    totalcount: 0,
    totalpage: 1
})

const teamdata = ref([])
const teamlist = () => {
    axios.get("http://localhost:5108/api/Manager/TeamTableShow", {
        params: {
            Pagindex: page.Pagindex,
            Pagsize: page.Pagsize,
            TeamName: formset.TeamName,
            TeamStatus: formset.TeamStatus
        }
    }).then(res => {
        teamdata.value = res.data.data.data
        page.totalcount = res.data.data.totalCount
        page.totalpage = res.data.data.totalPage
        console.log(res.data)
    })
}
//侦听器
watch(page, () => {
    teamlist();
})


//钩子函数
onMounted(() => {
    Insttreelist();
    teamlist();
})
const open = (teamId: any) => {
    ElMessageBox.confirm(
        '您确定要删除吗?',
        '警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            axios.delete("http://localhost:5203/api/Managment/TeamDelete", {
                data:
                    { teamId: teamId }
            }).then(res => {
                if (res.data.code == 1) {
                    ElMessage.success('删除成功')
                    teamlist()
                }
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '删除取消',
            })
        })
}
///团队状态切换
const Teamstate = (teamId: any) => {
    axios.delete("http://localhost:5203/api/Managment/TeamState", {
        data: {
            teamId: teamId
        }
    }).then(res => {
        if (res.data.code == 1) {
            ElMessage.success('状态切换成功')
            teamlist()
        }
    })
}

//团队添加逻辑
const teamSettinig = reactive({
    isOpen: false,
    title: "",
    isbool: false
})

const Teamadddata = reactive({
    "teamId": 0,
    "teamName": "",
    "parentTeam": "",
    "charge": store.current.userName,
    "teamTags": [],
    "teamStatus": true,
    "phone": "",
    "teamProfile": "",
    "isDelete": true
})

const teamset = (t: any) => {
    teamSettinig.isOpen = true
    if (t == null) {

        teamSettinig.title = "添加团队"
        Teamadddata.teamName = ""
        Teamadddata.parentTeam = ""
        Teamadddata.charge = store.current.userName
        Teamadddata.teamTags = []
        Teamadddata.teamStatus = true
        Teamadddata.phone = ""
        Teamadddata.teamProfile = ""
        teamSettinig.isbool = true
    }
    else {
        teamSettinig.title = "修改团队"
        Teamadddata.teamName = t.teamName
        Teamadddata.charge = "张三"
        Teamadddata.parentTeam = t.parentTeam
        Teamadddata.teamTags = t.teamTags
        Teamadddata.teamStatus = t.teamStatus
        Teamadddata.phone = t.phone
        Teamadddata.teamProfile = t.teamProfile
        Teamadddata.teamId = t.teamId
        teamSettinig.isbool = t.isDelete
        // ✅ 关键修复：正确解析 teamTags
        if (typeof t.teamTags === 'string') {
            Teamadddata.teamTags = t.teamTags.split(/[，,]/).map(tag => tag.trim()).filter(Boolean)
        } else if (Array.isArray(t.teamTags)) {
            Teamadddata.teamTags = t.teamTags.map(tag => tag.trim()).filter(Boolean)
        }
        teamSettinig.isbool = false

    }
}
const teamtage = () => {
    if (teamSettinig.isbool == true) {
        axios.post("http://localhost:5203/api/Managment/CreateTeam", Teamadddata).then(res => {
            if (res.data.code == 1) {
                teamSettinig.isOpen = false
                ElMessage.success('添加成功')
                teamlist()
            }
        })
    }
    else if (teamSettinig.isbool == false) {
        axios.put("http://localhost:5203/api/Managment/UpdateTeam", Teamadddata).then(res => {
            if (res.data.code == 1) {
                teamSettinig.isOpen = false
                ElMessage.success('修改成功')
                teamlist()
            }
        })

    }
}



</script>


<style scoped>
/* 现代医疗系统设计风格 - 专业医疗蓝主题 */

/* 页面主容器 */
.team-management-container {
  max-width: 1600px;
  margin: 0 auto;
  padding: 24px;
  background: linear-gradient(135deg, #f0f8ff 0%, #e6f2ff 100%);
  min-height: 100vh;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* 页面标题区域 */
.page-header {
  margin-bottom: 28px;
  padding: 20px 28px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.page-title {
  margin: 0 0 8px 0;
  font-size: 24px;
  font-weight: 600;
  color: #003d79;
}

.breadcrumb {
  font-size: 14px;
  color: #64748b;
}

/* 主内容区域 - 左右布局 */
.main-content {
  display: flex;
  gap: 24px;
  height: calc(100vh - 180px);
}

/* 左侧机构树 */
.sidebar {
  width: 280px;
  min-width: 280px;
}

.sidebar-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  height: 100%;
  box-shadow: 0 2px 12px rgba(0, 123, 255, 0.1);
  display: flex;
  flex-direction: column;
}

.sidebar-title {
  margin: 0 0 16px 0;
  font-size: 18px;
  font-weight: 600;
  color: #003d79;
}

.search-container {
  margin-bottom: 16px;
}

.search-input {
  width: 100%;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.search-input:focus {
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.2);
  border-color: #007bff;
}

.tree-container {
  flex: 1;
  overflow-y: auto;
  padding-right: 8px;
}

.tree-container::-webkit-scrollbar {
  width: 6px;
}

.tree-container::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.tree-container::-webkit-scrollbar-thumb {
  background: #bdc3c7;
  border-radius: 3px;
}

.tree-container::-webkit-scrollbar-thumb:hover {
  background: #95a5a6;
}

.custom-tree {
  font-size: 14px;
}

:deep(.el-tree-node__content:hover) {
  background-color: #f0f9ff !important;
}

:deep(.el-tree-node.is-current > .el-tree-node__content) {
  background-color: #e6f7ff !important;
  color: #007bff;
  font-weight: 500;
}

/* 右侧内容区域 */
.content-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  gap: 20px;
}

/* 搜索卡片 */
.search-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0, 123, 255, 0.1);
}

.search-form {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-end;
}

.form-item {
  margin-bottom: 0;
}

.search-input {
  width: 220px;
  transition: all 0.3s ease;
}

.search-select {
  width: 180px;
  transition: all 0.3s ease;
}

.search-btn {
  background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
  border: none;
  padding: 8px 20px;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.search-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
}

.reset-btn {
  padding: 8px 20px;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.reset-btn:hover {
  background-color: #f8f9fa;
  transform: translateY(-1px);
}

/* 团队卡片 */
/* 团队卡片 */
.team-card {
  background: var(--card-background);
  border-radius: var(--border-radius);
  padding: 28px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  transition: var(--transition);
}

.team-card:hover {
  box-shadow: var(--shadow-md);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--border-color);
  flex-wrap: wrap;
  gap: 16px;
}

.card-title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.card-title::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 20px;
  background-color: var(--primary-color);
  border-radius: 2px;
}

.header-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.add-btn, .enable-btn, .disable-btn, .delete-btn {
  padding: 10px 20px;
  border-radius: 8px;
  transition: var(--transition);
  font-size: 14px;
  font-weight: 500;
  border: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.add-btn {
  background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
  color: white;
}

.add-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.3);
  background: linear-gradient(135deg, var(--primary-dark), #1d4ed8);
}

.enable-btn {
  background-color: var(--success-color);
  color: white;
}

.enable-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
  background-color: #059669;
}

.disable-btn {
  background-color: var(--warning-color);
  color: white;
}

.disable-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
  background-color: #d97706;
}

.delete-btn {
  background-color: var(--danger-color);
  color: white;
}

.delete-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
  background-color: #dc2626;
}

.enable-btn:disabled, .disable-btn:disabled, .delete-btn:disabled {
  opacity: 0.5;
  transform: none;
  cursor: not-allowed;
  box-shadow: none;
}

/* 表格容器 */
.table-container {
  flex: 1;
  overflow: hidden;
  margin-bottom: 24px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
}

.team-table {
  height: 100%;
  border-radius: 8px;
  overflow: hidden;
}

:deep(.el-table__header-wrapper) {
  background: linear-gradient(135deg, #f8fafc, #e2e8f0);
  border-bottom: 2px solid var(--border-color);
}

:deep(.el-table__header th) {
  font-weight: 600 !important;
  color: var(--text-primary) !important;
  padding: 14px 0 !important;
}

:deep(.el-table__body tr:hover) {
  background-color: #f0f9ff !important;
}

.table-row-even {
  background-color: #ffffff;
}

.table-row-odd {
  background-color: #f8fafc;
}

/* 标签样式 */
.tag-container {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.team-tag {
  padding: 4px 10px;
  font-size: 12px;
  border-radius: 12px;
  transition: var(--transition);
  border: 1px solid transparent;
}

.team-tag:hover {
  transform: scale(1.05);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.status-tag {
  padding: 4px 12px;
  font-size: 12px;
  border-radius: 12px;
  font-weight: 500;
}

/* 操作按钮样式 */
.edit-btn, .state-btn, .delete-btn {
  transition: var(--transition);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
}

.edit-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.state-btn:hover {
  transform: translateY(-1px);
}

.delete-btn:hover {
  transform: translateY(-1px);
}

/* 分页容器 */
.pagination-container {
  display: flex;
  justify-content: flex-end;
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--border-color);
}

.pagination {
  --el-pagination-bg-color: transparent;
}

:deep(.el-pagination .btn-prev),
:deep(.el-pagination .btn-next) {
  border-radius: 6px;
  transition: var(--transition);
}

:deep(.el-pagination .btn-prev:hover),
:deep(.el-pagination .btn-next:hover) {
  color: var(--primary-color);
  border-color: var(--primary-color);
  background-color: #f0f9ff;
}

:deep(.el-pagination .el-pager li) {
  border-radius: 6px;
  transition: var(--transition);
}

:deep(.el-pagination .el-pager li:hover:not(.active)) {
  color: var(--primary-color);
  background-color: #f0f9ff;
}

:deep(.el-pagination .el-pager li.active) {
  background-color: var(--primary-color);
  color: white;
}

/* 弹窗样式 */
.dialog-form {
  padding: 16px 0;
}

.form-section {
  margin-bottom: 28px;
  padding: 20px;
  background-color: #f8fafc;
  border-radius: 12px;
  border-left: 4px solid var(--primary-color);
  transition: var(--transition);
}

.form-section:hover {
  background-color: #f1f5f9;
  box-shadow: var(--shadow-sm);
}

.section-title {
  margin: 0 0 16px 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
}

.el-form-item {
  margin-bottom: 20px;
}

.el-form-item__label {
  font-weight: 500;
  color: var(--text-secondary);
  font-size: 14px;
}

.form-input, .form-select, .form-textarea {
  width: 100%;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  transition: var(--transition);
  background-color: white;
}

.form-input:focus, .form-select:focus, .form-textarea:focus {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
  border-color: var(--primary-color);
}

.tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.tag-checkbox {
  margin: 0;
  transition: var(--transition);
}

.tag-checkbox:hover {
  transform: translateY(-1px);
}

:deep(.el-checkbox__label) {
  padding-left: 8px;
  color: var(--text-primary);
}

.custom-dialog {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-lg) !important;
}

.custom-dialog .el-dialog__header {
  background: linear-gradient(135deg, var(--primary-color), var(--info-color));
  color: white;
  padding: 24px 32px;
  margin: 0;
  border-bottom: none;
}

.custom-dialog .el-dialog__title {
  color: white;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.02em;
}

.custom-dialog .el-dialog__body {
  padding: 32px;
  max-height: 60vh;
  overflow-y: auto;
  background-color: var(--card-background);
}

.custom-dialog .el-dialog__body::-webkit-scrollbar {
  width: 8px;
}

.custom-dialog .el-dialog__body::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 4px;
}

.custom-dialog .el-dialog__body::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
  transition: var(--transition);
}

.custom-dialog .el-dialog__body::-webkit-scrollbar-thumb:hover {
  background: var(--primary-light);
}

.custom-dialog .el-dialog__footer {
  padding: 20px 32px;
  background-color: #f8fafc;
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
}

.cancel-btn, .save-btn {
  border-radius: 8px;
  transition: var(--transition);
  padding: 10px 24px;
  font-weight: 500;
  font-size: 14px;
}

.cancel-btn {
  background-color: #f1f5f9;
  border: 1px solid var(--border-color);
}

.cancel-btn:hover {
  background-color: #e2e8f0;
  transform: translateY(-1px);
}

.save-btn {
  background: linear-gradient(135deg, var(--primary-color), var(--info-color));
  border: none;
  color: white;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}

.save-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.3);
  background: linear-gradient(135deg, var(--primary-dark), #4f46e5);
}

/* 加载状态 */
:deep(.el-loading-mask) {
  background-color: rgba(255, 255, 255, 0.8) !important;
}

:deep(.el-loading-spinner .path) {
  stroke: var(--primary-color) !important;
}

/* 响应式设计 */
@media (max-width: 1400px) {
  .main-content {
    gap: 20px;
  }
  
  .sidebar {
    width: 280px;
    min-width: 280px;
  }
}

@media (max-width: 1200px) {
  .main-content {
    height: auto;
    flex-direction: column;
  }
  
  .sidebar {
    width: 100%;
    max-height: 350px;
  }
  
  .header-actions {
    justify-content: center;
    width: 100%;
  }
  
  .card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  
  .search-form {
    gap: 16px;
  }
}

@media (max-width: 768px) {
  .team-management-container {
    padding: 16px;
  }
  
  .page-header {
    padding: 20px;
    margin-bottom: 20px;
  }
  
  .page-title {
    font-size: 24px;
  }
  
  .search-form {
    flex-direction: column;
    align-items: stretch;
  }
  
  .search-input,
  .search-select {
    width: 100%;
  }
  
  .sidebar-card,
  .search-card,
  .team-card {
    padding: 20px;
  }
  
  .pagination-container {
    justify-content: center;
  }
  
  .custom-dialog {
    width: 95% !important;
    margin: 5vh auto;
  }
  
  .custom-dialog .el-dialog__body {
    max-height: 70vh;
    padding: 20px;
  }
  
  .custom-dialog .el-dialog__header {
    padding: 20px;
  }
  
  .custom-dialog .el-dialog__footer {
    padding: 16px 20px;
  }
  
  .header-actions {
    flex-direction: column;
    gap: 8px;
  }
  
  .header-actions .el-button {
    width: 100%;
  }
  
  .tags-container {
    gap: 8px;
  }
  
  .tag-checkbox {
    margin-bottom: 8px;
  }
}

@media (max-width: 480px) {
  .team-management-container {
    padding: 12px;
  }
  
  .page-header,
  .sidebar-card,
  .search-card,
  .team-card {
    padding: 16px;
  }
  
  .page-title {
    font-size: 20px;
  }
  
  .card-title,
  .section-title {
    font-size: 16px;
  }
  
  .dialog-footer {
    flex-direction: column;
  }
  
  .cancel-btn,
  .save-btn {
    width: 100%;
  }
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid #e6f2ff;
}

.card-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #003d79;
}

.header-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.add-btn,
.enable-btn,
.disable-btn,
.delete-btn {
  padding: 8px 16px;
  border-radius: 6px;
  transition: all 0.3s ease;
  font-size: 14px;
}

.add-btn {
  background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
  border: none;
}

.add-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
}

.enable-btn,
.disable-btn,
.delete-btn {
  transition: all 0.3s ease;
}

.enable-btn:hover,
.disable-btn:hover,
.delete-btn:hover {
  transform: translateY(-1px);
}

.enable-btn:disabled,
.disable-btn:disabled,
.delete-btn:disabled {
  opacity: 0.6;
  transform: none;
  cursor: not-allowed;
}

/* 表格容器 */
.table-container {
  flex: 1;
  overflow: hidden;
  margin-bottom: 20px;
}

.el-table {
  height: 100%;
  border-radius: 8px;
  overflow: hidden;
}

:deep(.el-table__header) {
  background: linear-gradient(135deg, #f0f8ff 0%, #e6f2ff 100%);
}

.el-table__row:hover {
  background-color: #f0f9ff;
}

.table-row-even {
  background-color: #ffffff;
}

.table-row-odd {
  background-color: #f9fafb;
}

/* 标签样式 */
.tag-container {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.team-tag {
  padding: 2px 8px;
  font-size: 12px;
  transition: all 0.3s ease;
}

.team-tag:hover {
  transform: scale(1.05);
}

.status-tag {
  padding: 2px 10px;
  font-size: 12px;
}

/* 操作按钮样式 */
.edit-btn,
.state-btn,
.delete-btn {
  transition: all 0.3s ease;
  padding: 4px 10px;
}

.edit-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
}

.state-btn:hover,
.delete-btn:hover {
  transform: translateY(-1px);
}

/* 分页容器 */
.pagination-container {
  display: flex;
  justify-content: flex-end;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid #e5e7eb;
}

/* 弹窗样式 */
.dialog-form {
  padding: 10px 0;
}

.form-section {
  margin-bottom: 24px;
  padding: 16px;
  background-color: #f8fafc;
  border-radius: 8px;
  border-left: 4px solid #007bff;
}

.section-title {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 600;
  color: #003d79;
}

.el-form-item {
  margin-bottom: 20px;
}

.el-form-item__label {
  font-weight: 500;
  color: #374151;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  transition: all 0.3s ease;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.2);
  border-color: #007bff;
}

.tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.tag-checkbox {
  margin: 0;
}

:deep(.el-checkbox__label) {
  padding-left: 6px;
}

.custom-dialog {
  border-radius: 12px;
  overflow: hidden;
}

.custom-dialog .el-dialog__header {
  background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
  color: white;
  padding: 20px;
  margin: 0;
}

.custom-dialog .el-dialog__title {
  color: white;
  font-weight: 600;
  font-size: 18px;
}

.custom-dialog .el-dialog__body {
  padding: 24px;
  max-height: 60vh;
  overflow-y: auto;
}

.custom-dialog .el-dialog__body::-webkit-scrollbar {
  width: 6px;
}

.custom-dialog .el-dialog__body::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.custom-dialog .el-dialog__body::-webkit-scrollbar-thumb {
  background: #bdc3c7;
  border-radius: 3px;
}

.custom-dialog .el-dialog__footer {
  padding: 16px 24px;
  background-color: #f9fafb;
  border-top: 1px solid #e5e7eb;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
}

.cancel-btn,
.save-btn {
  border-radius: 6px;
  transition: all 0.3s ease;
  padding: 8px 20px;
}

.save-btn {
  background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
  border: none;
}

.save-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .main-content {
    height: auto;
    flex-direction: column;
  }
  
  .sidebar {
    width: 100%;
    max-height: 300px;
  }
  
  .header-actions {
    justify-content: center;
    width: 100%;
  }
  
  .card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
}

@media (max-width: 768px) {
  .team-management-container {
    padding: 16px;
  }
  
  .page-header {
    padding: 16px;
    margin-bottom: 20px;
  }
  
  .page-title {
    font-size: 20px;
  }
  
  .search-form {
    flex-direction: column;
    align-items: stretch;
  }
  
  .search-input,
  .search-select {
    width: 100%;
  }
  
  .sidebar-card,
  .search-card,
  .team-card {
    padding: 16px;
  }
  
  .pagination-container {
    justify-content: center;
  }
  
  .custom-dialog {
    width: 95% !important;
    margin: 5vh auto;
  }
  
  .custom-dialog .el-dialog__body {
    max-height: 70vh;
  }
  
  .header-actions {
    flex-direction: column;
    gap: 8px;
  }
}
</style>
